<!-- 管理员模块--管理用户 -->
<template>
    <div class="MyContainer">
        <div class="customer-info" style="text-align:center;">用户信息管理</div>       
        <div class="mt-4">
            <el-input style="width: 400px" size="large" v-model="input" placeholder="请输入用户姓名" class="input-with-select">
                <template #append><el-button :icon="Search" @click="customerName"/></template>
            </el-input>
            <el-button type="primary"  style="float:right;margin-right: 12px;" size="large" @click="customerAll">查询全部</el-button>
        </div>

        <el-table :data="tableData" style="margin-top:25px" :default-sort="{ prop: 'cusOld', order:null }">
            <el-table-column label="姓名" prop="cusName" width="105"/>
            <el-table-column label="年龄" prop="cusOld" width="85" sortable/>
            <el-table-column prop="cusGender" label="性别" :filters="[{ text: '男', value: '男' },{ text: '女', value: '女' },]"
                          :filter-method="filterTag" filter-placement="bottom-end" width="130"/>
            <el-table-column label="密码" prop="cusPswd" width="220" >
                <template #default="scope">
                    <span>{{ scope.row.cusPswd }}</span>
                    <el-popconfirm @confirm="chanagePsw(scope.$index)" width="220" confirm-button-text="确定" cancel-button-text="取消" 
                                :icon="InfoFilled" icon-color="#626AEF" title="请确认是否重置密码?">
                        <template #reference>
                            <el-button type="danger" style="float: right;" circle><el-icon><EditPen /></el-icon></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column label="身份证号码" prop="cusIdentity" width="280"/>
            <el-table-column label="民族" prop="cusNation" width="120"/>
            <el-table-column label="住址" prop="cusAddress" width="100"/>
            <el-table-column label="电话号码" prop="cusPhonenum" width="200"/>
            <el-table-column align="right" width="120" fixed="right">
              <template #header>
                  <el-button type="primary" @click="dialogFormVisible = true" style="width: 100%">
                    <el-icon style="margin-right:5px"><Plus /></el-icon>添加</el-button>
              </template>
              <template #default="scope">
                  <!-- <div v-if="activeIndex == scope.$index">
                      <el-button type="info" @click="handleSave(scope.$index)" style="width: 100%">保存信息</el-button>
                  </div> -->
                  <div>
                      <el-button type="success" @click="Edit(scope.$index);dialogFormVisible_edit = true" style="width: 100%">编辑</el-button>
                      <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定" cancel-button-text="取消" 
                                      :icon="InfoFilled" icon-color="#626AEF" title="请确认是否删除该医生信息?">
                          <template #reference>
                              <el-button type="danger" style="width: 100%;margin-top:8px;margin-left:0px">删除</el-button>
                          </template>
                      </el-popconfirm>
                  </div>
              </template>
          </el-table-column>
      </el-table>

      <el-dialog v-model="dialogFormVisible" title="请填写用户信息" draggable>
            <div class="demo-input-suffix">
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">姓名</span>
                    <el-input v-model="input_name" class="w-50 m-2" placeholder="必填项" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">年龄</span>
                    <el-input v-model="input_old" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">性别</span>
                    <el-select v-model="input_gender" class="w-50 m-2">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">民族</span>
                    <el-input v-model="input_nation" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">密码</span>
                    <el-input v-model="input_psw" class="w-50 m-2" placeholder="必填项" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">身份证号码</span>
                    <el-input v-model="input_iden" class="w-50 m-2" placeholder="必填项"/>
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">住址</span>
                    <el-input v-model="input_add" class="w-50 m-2"  />   
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">电话号码</span>
                    <el-input v-model="input_tel" class="w-50 m-2"  />
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="large">取消</el-button>
                    <el-button type="primary" @click="handleAdd();dialogFormVisible = false" size="large">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- Edit -->
        <el-dialog v-model="dialogFormVisible_edit" title="请填写医生信息" :passdata="tableData_dia" draggable open="Edit">
            
            <div class="demo-input-suffix">
                
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">姓名</span>
                    <el-input v-model="tableData_dia[1].cusName" class="w-50 m-2" placeholder="必填项">
                    </el-input>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">年龄</span>
                    <el-input type="number" v-model="tableData_dia[1].cusOld" class="w-50 m-2"/>
                </el-row>
         
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">性别</span>
                    <el-select v-model="tableData_dia[1].cusGender" class="w-50 m-2">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">民族</span>
                    <el-input v-model="tableData_dia[1].cusNation" class="w-50 m-2" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">密码</span>
                    <el-input v-model="tableData_dia[1].cusPswd" class="w-50 m-2" placeholder="必填项" />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">身份证号码</span>
                    <el-input v-model="tableData_dia[1].cusIdentity" class="w-50 m-2" placeholder="必填项" />
                </el-row>
                <el-row :gutter="20">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">住址</span>
                    <el-input v-model="tableData_dia[1].cusAddress" class="w-50 m-2" /> 
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">电话号码</span>
                    <el-input v-model="tableData_dia[1].cusPhonenum" class="w-50 m-2"  />
                </el-row>  
            </div>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible_edit = false" size="large">取消</el-button>
                <el-button type="primary" @click="handleEdit(tableData_dia[1].cusId);dialogFormVisible_edit = false" size="large">确定</el-button>
            </span>  
        </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { getAdmCusInfo,addAdmCusInfo,delcustomer } from '../../api/manager';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { sortOrders } from 'element-plus/es/components/table-v2/src/constants';
interface TableItem {
    cusId:number;
    cusName: string;
    cusOld: number;
    cusGender: string;
    cusPswd: string;
    cusNation: string;
    cusAddress:string;
    cusPhonenum: string;
    cusIdentity: string;
}

const input = ref('');

const tableData = ref<TableItem[]>([])
const tableData_dia = ref<TableItem[]>([])

//获取数据
const getData = () => {
    getAdmCusInfo().then(res=>{
    console.log("所有用户信息",res.data)
    if(res.code == 200){
        tableData.value=res.data 
    }
  }).catch(err=>{console.log("请求失败",err)})
};
getData();

//名字查询
const customerName = () =>{
    getAdmCusInfo(input.value).then(res=>{
        tableData.value=res.data
    }).catch(err=>{console.log("请求失败")})
}

//筛选性别
const filterTag = (value: string, row: TableItem) => {
return row.cusGender === value
}

//一键查询所有
const customerAll = () =>{
    getData()
}
let activeIndex = ref<number>(-1);

const dialogFormVisible_edit = ref(false)

// 编辑行
const handleEdit = (index: number) => {
    activeIndex.value = index-1;
    console.log("activeIndex.value",activeIndex.value)
    const tmp=tableData_dia.value[1]
    if(tmp.cusName == "" || tmp.cusPswd=="" || tmp.cusIdentity==""){
        handleDelete(activeIndex.value)
        customerAll()
    }else{
        addAdmCusInfo(tmp).then(res=>{
        console.log("回传信息zzz: ",JSON.stringify(tmp))
        customerAll()
        }).catch(err=>{console.log("fail")})
        
    }
};
const Edit = (index:number) => {
    tableData_dia.value = new Array([])
    tableData_dia.value.push(tableData.value[index])
}

const dialogFormVisible = ref(false)

const input_name=ref(''),input_old=ref(''),input_gender=ref(''),input_add=ref('')
const input_psw=ref(''),input_nation=ref(''),input_tel=ref(''),input_iden=ref('')
// 新增行
const handleAdd = function () {
    const item = {
        cusId:'',
        cusName: input_name.value,
        cusOld: input_old.value,
        cusGender: input_gender.value,
        cusPswd: input_psw.value,
        cusNation: input_nation.value,
        cusAddress: input_add.value,
        cusPhonenum: input_tel.value,
        cusIdentity: input_iden.value,
    };
    activeIndex.value = tableData.value.length;
    if(item.cusName === '' || item.cusPswd=="" || item.cusIdentity==""){
        customerAll()
    }else{
        addAdmCusInfo(item).then(res=>{
        console.log(res)
        console.log("回传信息2:",tableData.value)
        tableData.value.push(item);
        customerAll()
        }).catch(err=>{console.log("fail")})
    }
  
};


// 删除行
const handleDelete = function (index: number) {
    const id=tableData.value[index].cusId
    tableData.value.splice(index, 1);
    console.log(id)
    delcustomer(id).then(res=>{
         console.log("回传信息：",id)
         customerAll()
    }).catch(err=>{console.log("fail")})
};

// 保存行
const handleSave = (index:number) => {
  const tmp=tableData.value[index]
  if(tmp.cusName == "" || tmp.cusPswd=="" || tmp.cusIdentity==""){
      handleDelete(activeIndex.value)
      customerAll()
  }else{
      addAdmCusInfo(tmp).then(res=>{
      //console.log("1")
      console.log("回传信息：",JSON.stringify(tmp))
      activeIndex.value = -1;
      }).catch(err=>{console.log("fail")})
      customerAll()
  }
  
};

//重置密码
const chanagePsw = (index: number) => {
    tableData.value[index].cusPswd ='1234'
    handleSave(index)
    ElMessage({
        type: 'success',
        message: '重置成功',
    })
};
</script>

<style scoped>
.customer-info {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>